window.addEventListener("load", function () {
	

	const apiData = [
		{"times": 4000, "price": 1200, "unitPrice": "0.3000"},
		{"times": 8000, "price": 2000,"unitPrice": "0.2500" },
		{"times": 40000, "price": 8000, "unitPrice": "0.2000" }
	   ]
  
	   // 功能一：点击tab区增加激活样式
	   
	// $("#scanCodeList li").forEach(function(v,i){
	// 	v.addEventListener("click",function(){
	// 		// 思考如何将默认的第一个li不增加激活样式
	// 		if(!this.classList.contains("default")){
	// 			$("#scanCodeList li").forEach(function(item){
	// 				item.classList.remove("active");
	// 			})
	// 			this.classList.add("active")
	// 		}
	// 	})
	// })
	//    动态渲染apiTab区的li 以及p

	// 遍历数组
	apiData.forEach(function(v,i){
			// $("#scanCodeList").innerHTML += i ===0 ? `<li class="apiCount active">${v.times}次</li>`
			// 拼接HTML到指定位置
			$("#scanCodeList").innerHTML += 
			// 默认判断
			i ===0? `<li class="apiCount active">${v.times}次</li>` : `<li class="apiCount">${v.times}次</li>`
	})
	// 设置默认价格
	$("#price").innerHTML = `<span class="font20 fbold cff546b"> ￥${apiData[0].price} </span>
	(约${apiData[0].unitPrice}元/次)，仅限企业实名购买;`
	
	// console.log($(".apiCount"));
	// 遍历li节点
	$(".apiCount").forEach(function(v,i){
		// 添加点击事件
		v.addEventListener("click",function(){
			// 排他思想
			$(".apiCount").forEach(function(item){
				
				item.classList.remove("active")
			})
			this.classList.add("active");
			// 拼接对应的价格
			$("#price").innerHTML = `<span class="font20 fbold cff546b"> ￥${apiData[i].price} </span>
			(约${apiData[i].unitPrice}元/次)，仅限企业实名购买;`
		})
	})


	const mainTabListData = [
		{name: "API文档"},
		{name: "错误码参照"},
		{name: "示例代码"},
		{name: "联系我们"}
	]

	mainTabListData.forEach(function(v,i){
		$("#mainTabList").innerHTML += 
			i === 0 ? `<li class="active">${v.name}</li>` :`<li>${v.name}</li>`
	})

	// console.log($("#mainTabList li"));s
	// $("#tabCon .tabConetNode")[0].style.display = "block";
	// $("#mainTabList li").forEach(function(v,i){
	// 	v.addEventListener("click",function(){
		
	// 		$("#mainTabList li").forEach(function(item,index){
	// 			item.classList.remove("active");
	// 			$("#tabCon .tabConetNode")[index].style.display = "none"
	// 		})
	// 		this.classList.add("active")
	// 		$("#tabCon .tabConetNode")[i].style.display = "block"
	// 	})
	// })


	
	$("#tabCon .tabConetNode")[0].classList.add("on");
	// 	$("#mainTabList li").forEach(function(v,i){
	// 	v.addEventListener("click",function(){
	// 		$("#mainTabList li").forEach(function(item,index){
	// 			item.classList.remove("active");
	// 			$("#tabCon .tabConetNode")[index].classList.remove("on");
	// 		})
	// 		this.classList.add("active");
	// 		$("#tabCon .tabConetNode")[i].classList.add("on");
	// 	})	
	// })
	tab("#mainTabList li","active","#tabCon .tabConetNode","on");
	//返回顶部
	toTop("#toTop");

	//配置
	const config = {
		selector: "#bannerBg",
		vx: 4, //点x轴速度,正为右，负为左
		vy: 4, //点y轴速度
		height: 2, //点高宽，其实为正方形，所以不宜太大
		width: 2,
		count: 100, //点个数
		color: "#ccc", //点颜色
		stroke: "125,79,34", //线条颜色
		dist: 6000, //点吸附距离
		e_dist: 20000, //鼠标吸附加速距离
		max_conn: 15, //点到点最大连接数
	};
	//调用
	CanvasParticle(config);
});
